<template>
  <div class="add-modal">
    <div class="add">
      <input
        v-for="(d,i) in formList"
        :key="d.field"
        :placeholder="d.label"
        v-model="formList[i].value"
      />
      <button @click="submit">保存</button>
      <button @click="$emit('close')">取消</button>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        formList:[
          {
            label:'唱片',
            field:'album',
            value:''
          },
          {
            label:'歌手',
            field:'singer',
            value:''
          },
          {
            label:'价格',
            field:'price',
            value:''
          },
          {
            label:'库存',
            field:'number',
            value:''
          }
        ]
      }
    },
    methods:{
      submit(){
        const obj = {};
        this.formList.forEach(i=>{
          obj[i.field] = i.value;
        })
        this.$emit('add',obj)
      }
    }
  }
</script>

<style lang="sass" scoped>
.add-modal
  display: flex
  justify-content: center
  align-items: center
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: rgba(0,0,0,.8)
  .add
    background: #fff
    padding: 30px
    width: 600px
    height: 400px
</style>
